$(function () {
  initArt();

  function initArt() {
    axios({
      mthod: "GET",
      url: "/my/article/cates",
    }).then((res) => {
      // console.log(res);
      if (res.data.status !== 0) {
        return layui.layer.msg(res.data.message);
      }
      let arr = [];
      res.data.data.forEach((ele) => {
        arr.push(`
            <tr>
                <td>${ele.Id}</td>
                <td>${ele.name}</td>
                <td>${ele.alias}</td>
                <td>
                    <button type="button" data-id="${ele.Id}" class="layui-btn btn-edit layui-btn-xs">编辑</button>
                    <button type="button" data-id="${ele.Id}" class="layui-btn layui-btn-xs delBtn layui-btn-danger">删除</button>
                </td>
            </tr>
                `);
      });
      $("tbody").empty().html(arr.join(""));
    });
  }

  let indexAdd;
  $("#addbtn").on("click", function () {
    // console.log(123);
    indexAdd = layer.open({
      type: 1,
      title: "添加文章分类",
      content: `<form class="layui-form" action="" id="addform">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>`,
      area: ["500px", "250px"],
    });
  });

  $("body").on("submit", "#addform", function (e) {
    e.preventDefault();
    axios({
      method: "POST",
      url: "/my/article/addcates",
      data: $(this).serialize(),
    }).then((res) => {
      if (res.data.status !== 0) {
        return layui.layer.msg(res.data.message);
      }
      layui.layer.msg("添加成功");
      initArt();
      layer.close(indexAdd);
    });
  });

  let indexEdit;
  $("tbody").on("click", ".btn-edit", function () {
    indexEdit = layer.open({
      type: 1,
      title: "修改文章分类",
      content: `<form class="layui-form" action="" id="editform" lay-filter="editform">
            <input type="hidden" name="Id">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>`,
      area: ["500px", "250px"],
    });
    let index = $(this).attr("data-id");
    axios({
      method: "GET",
      url: "/my/article/cates/" + index,
    }).then((res) => {
      if (res.data.status !== 0) {
        return layui.layer.msg(res.data.message);
      }
      layui.form.val("editform", res.data.data);
    });
  });

  $("body").on("submit", "#editform", function (e) {
    e.preventDefault();
    axios({
      method: "POST",
      url: "/my/article/updatecate",
      data: $(this).serialize(),
    }).then((res) => {
      if (res.data.status !== 0) {
        return layui.layer.msg(res.data.message);
      }
      layui.layer.msg("修改成功");
      initArt();
      layer.close(indexEdit);
    });
  });

  $("tbody").on("click", ".delBtn", function () {
    let index = $(this).attr("data-id");
    axios({
      method: "GET",
      url: "/my/article/deletecate/" + index,
    }).then((res) => {
      if (res.data.status !== 0) {
        return layui.layer.msg(res.data.message);
      }
      initArt();
      layui.layer.msg("删除成功");
    });
  });
});
